// 桑基图
<template>
  <div class="threeBarChart" id="sankey"></div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      maxList: []
    }
  },
  props: {
    xline: Array, // x轴名称列表
    yline: Array, // y轴数据
    config: Object // 参数配置
  },

  methods: {
    // 重新绘制图表
    forceRerender() {

    },
    setChart() {
      this.myChart = this.$echarts.init(document.getElementById('sankey'))
      this.myChart.clear();
      this.myChart.resize()
      this.myChart.setOption(this.option);
    },
    // 监听点击事件
    watchChart() {
      var _this = this
      this.myChart.on('click', function (params) {
        var max = 0
        for (var i = 0; i < _this.maxList.length; i++) {
          if (params.name == _this.maxList[i].name) {
            max = _this.maxList[i].vlaue
          }
        }
        _this.$emit("chartclick", params, max)
      });
    },
    // 设置图表数值，重新渲染页面
    setDataAndRender(name, zoomRatio) {
      var newLink = JSON.parse(JSON.stringify(this.baseLinks))
      for (var i = 0; i < newLink.length; i++) {
        if (newLink[i].source == name) {
          newLink[i].value = zoomRatio * newLink[i].value
        }
      }
      this.option.series.links = newLink
      this.setChart()
    },
    // 获取当前图表的配置属性
    getSankeyData() {
      return this.option.series.links
    },
    // 最大值列表
    initMaxList() {
      var links = this.getSankeyData()
      let ifFind = false
      for (var i = 0; i < links.length; i++) {
        ifFind = false
        for (var j = 0; j < this.maxList.length; j++) {
          if (this.maxList[j].name == links[i].source) {
            this.maxList[j].value = this.maxList[j].value + links[i].value
            ifFind = true
          }
        }
        if (!ifFind) {
          this.maxList.push({
            name: links[i].source,
            value: links[i].value
          })
        }
      }
    },
    getMaxList() {
      return this.maxList
    }
  },
  data() {
    return {
      show: true,
      myChart: undefined,
      baseLinks: [],
      option: {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        animation: false,
        series: {
          type: 'sankey',
          // layout: 'none',
          levels: [
            {
              depth: 0,
              itemStyle: {
                color: '#214f90'
              },
              lineStyle: {
                color: 'source',
                opacity: 0.4
              }
            },
            {
              depth: 1,
              itemStyle: {
                color: '#377ec3'
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            },
            {
              depth: 2,
              itemStyle: {
                color: '#469ae6'
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            },
            {
              depth: 3,
              itemStyle: {
                color: '#123160'
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            }
          ],
          label: {
            // position: 'center'
            // color:"#fff"
          },
          data: [

            {
              name: '直接排放'
            },
            {
              name: '能源间接排放'
            },
            {
              name: '无烟煤',

            },
            {
              name: '柴油'
            },
            {
              name: 'CO2',
              itemStyle: {
                color: "#e58c77"
              }
            },
            {
              name: 'CH4'
            },
            {
              name: 'N2O'
            },
            {
              name: 'HFC5'
            },
            {
              name: 'PFC5'
            },
            {
              name: 'SF6'
            },

          ],
          links: [
            {
              source: '直接排放',
              target: '无烟煤',
              value: 3337754.78,

            },
            {
              source: '直接排放',
              target: '柴油',
              value: 3337754.78
            },
            {
              source: '能源间接排放',
              target: '无烟煤',
              value: 3337754.78
            },
            {
              source: '能源间接排放',
              target: '柴油',
              value: 3337754.78
            },
            {
              source: '无烟煤',
              target: 'CO2',
              value: 3337754.78
            },
            {
              source: '无烟煤',
              target: 'CH4',
              value: 3337754.78
            },
            {
              source: '无烟煤',
              target: 'N2O',
              value: 3337754.78
            },
            {
              source: '无烟煤',
              target: 'HFC5',
              value: 3337754.78
            },
            {
              source: '柴油',
              target: 'PFC5',
              value: 3337754.78
            },
            {
              source: '柴油',
              target: 'SF6',
              value: 3337754.78
            },
            {
              source: '柴油',
              target: 'CO2',
              value: 3337754.78
            },
          ]
        },
      }
    }
  },
  mounted() {
    this.setChart()
    this.watchChart()
    this.maxList = []
    this.baseLinks = this.option.series.links
    this.initMaxList()
  },
}
</script>

<style lang="less" scoped>
.threeBarChart {
  height: 100%;
  width: 100%;
}
</style>
